import React, { useRef, useState } from "react"
import css from './prog_dialog.module.css'
import { Spin } from "antd";
import { LoadingOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import './anim.css';
import { delay, deleteDialog, updateDialog } from "./ProgDialogGroup";
import { motion, AnimatePresence } from "framer-motion";

export enum State {
  success,
  error,
  warning,
  progress,
}

export interface Dialog {
  id: number,
  title: string,
  state: State,
  msg: string,
  show: boolean,
}

const Ind: React.FC<{ state?: State }> = ({ state = State.progress }) => {

  switch (state) {
    case State.progress: return <Spin indicator={<LoadingOutlined style={{ fontSize: '70px' }} />} />;
    case State.error: return <></>;
    case State.success: return <CheckCircleOutlined style={{ fontSize: '70px', color: 'rgb(82,196,26)' }} />;
  }
  return <></>;
}

interface MTEvent {
  clientX: number,
  clientY: number,
}

function useDrag() {
  const [left, setLeft] = useState('50%');
  const [top, setTop] = useState('50%');
  const [dragFlag, setDragFlag] = useState(false);
  const [offsetX, setOffsetX] = useState(0);
  const [offsetY, setOffsetY] = useState(0);

  const down = (div: HTMLDivElement, pos: MTEvent) => {

    setDragFlag(true);
    const rect = div.getBoundingClientRect();
    setOffsetX(pos.clientX - (rect.left + rect.width / 2));
    setOffsetY(pos.clientY - (rect.top + rect.height / 2));
  }

  const move = (pos: MTEvent) => {
    if (!dragFlag) {
      return;
    }
    setLeft(`${pos.clientX - offsetX}px`);
    setTop(`${pos.clientY - offsetY}px`);
  }

  const up = () => {
    setDragFlag(false);
  }

  return { top, left, down, move, up };
}

const offset = {
  x: '-50%',
  y: '-50%'
};

const ProgDialog: React.FC<{ title: string, state: State, msg: string, show: boolean,  id: number }> = ({ title, state, msg, show, id }) => {

  const { top, left, down, move, up } = useDrag();
  const onClickClose = async () => {
    updateDialog(id, {
      title, state, msg, id,
      show: false,
    })
    await delay(200);
    deleteDialog(id);
  }
  return (
    <>
      <AnimatePresence>
        {show && (
          <motion.div
            className={css.root}
            initial={{ scale: 0.3, ...offset }}
            animate={{ scale: 1, ...offset }}
            exit={{ scale: 0.3, ...offset }}
            transition={{ duration: 0.2 }}

            style={{ left, top }}
            onMouseDown={(e) => down(e.currentTarget, e)} onTouchStart={(e) => down(e.currentTarget, e.touches[0])}
            onMouseMove={(e) => move(e)} onTouchMove={(e) => move(e.touches[0])}
            onMouseUp={() => up()} onTouchEnd={() => up()}
          >
            <div className={css.title_root}>
              <label style={{ width: '30px' }}></label>
              <label className={css.title}>{title}</label>
              <CloseCircleOutlined onClick={onClickClose} className={[css.ml10, css.close].join(' ')} />
            </div>
            <div className={[css.flex_row_center, css.mt10].join(' ')}>
              <Ind state={state} />
              <div className={css.ml10}>{msg}</div>
            </div>
          </motion.div>
        )}

      </AnimatePresence>


    </>
  )
}


export default ProgDialog;

